/* model */
import { ConnectorModuleComponentNameEnum } from '@src/modules/connector/model'
/* scss */
import '@src/modules/connector/view/list/components/header/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type ConnectorListViewHeaderButtonType = {
  name: string;
  icon: string;
  onClick: () => void;
}

export type ConnectorListViewHeaderProps = {
  
}

export interface ConnectorListViewHeaderSetupState {
  
}

export enum ConnectorListViewHeaderEmitEventNameEnum {
  Input = 'input',
}

export type ConnectorListViewHeaderInstance = ComponentInstance & ConnectorListViewHeaderSetupState
export type ConnectorListViewHeaderVM = ComponentRenderProxy<ConnectorListViewHeaderProps> & CommonComponentInstance & ConnectorListViewHeaderInstance

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorListViewHeader,
  emits: [
    ConnectorListViewHeaderEmitEventNameEnum.Input,
  ],
  props: {
    title: {
      type: String as PropType<string>,
      default: '',
    },
    subTitle: {
      type: String as PropType<string>,
      default: '',
    },
    buttons: {
      type: Array as PropType<ConnectorListViewHeaderButtonType[]>,
      default: () => [],
    }
  },
  setup(props: ConnectorListViewHeaderProps, { emit }) {
    // 
  },
  render(h: CreateElement) {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorListViewHeader}>
        
        <div class="connector-list-view-header-left">
          { this.$slots.left }
        </div>
        
        <div class="connector-list-view-header-right">
          { this.$slots.right }
        </div>
        
      </div>
    )
  }
})
